.layout {
  width: 1200px;
  margin: 0 auto;
}


// height 10~100 px
@for $i from 10 through 100 {
  .h#{$i} {
      height: #{$i}px !important;
  }
}

// width 10~100 px
@for $i from 10 through 300 {
  .w#{$i} {
      width: #{$i}px !important;
  }
}

.wh-full {
  width: 100%;
  height: 100%;
}

/* flex */
.flx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flx-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flx-align-center {
  display: flex;
  align-items: center;
}

/* clearfix */
.clearfix::after {
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
  content: "";
}

/* 文字单行省略号 */
.sle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 文字多行省略号 */
.mle {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
// display
.inline-block {
  display: inline-block;
}
.block {
  display: block;
}
.inline {
  display: inline;
}

// position
.relative {
  position: relative !important;
}
.absolute {
  position: absolute !important;
}

// border-radius 1~20 px
@for $i from 1 through 20 {
  .r#{$i} {
      border-radius: #{$i}px !important;
  }
}

// font-size 10~100 px
@for $i from 10 through 100 {
  .f#{$i} {
      font-size: #{$i}px !important;
  }
}

// margin/padding 0~100 px
@for $i from 0 through 100 {
  .m#{$i} {
      margin: #{$i}px !important;
  }
  .p#{$i} {
      padding: #{$i}px !important;
  }
}

// margin/padding-[direction] 0~100 px
@for $i from 0 through 100 {
  .mt#{$i} {
      margin-top: #{$i}px !important;
  }
  .mr#{$i} {
      margin-right: #{$i}px !important;
  }
  .mb#{$i} {
      margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
      margin-left: #{$i}px !important;
  }
  .pt#{$i} {
      padding-top: #{$i}px !important;
  }
  .pr#{$i} {
      padding-right: #{$i}px !important;
  }
  .pb#{$i} {
      padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
      padding-left: #{$i}px !important;
  }
}

// 字体间距
@for $i from 1 to 20 {
  .lb-#{$i} {
      letter-spacing: #{$i}px;
  }
}

// 字体行高
@for $i from 1 to 100 {
  .lh-#{$i} {
      line-height: #{$i}px;
  }
}

.pointer {
  cursor: pointer;
}

// 外发光
.shadow {
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.2);
}
